import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import { ElMessage } from 'element-plus'

/* ---------------- 路由表 ---------------- */
const routes: RouteRecordRaw[] = [
  /* 根路径 → 重定向到登录页 */
  {
    path: '/',
    redirect: '/login'
  },

  /* 登录页 */
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/Login.vue'),
    meta: {
      title: '登录',
      requiresAuth: false  // 🔑 重要：登录页不需要验证
    }
  },

  /* 主布局 - 包含侧边栏和顶部栏 */
  {
    path: '/',
    component: () => import('@/components/Layout/index.vue'),
    meta: {
      requiresAuth: true
    },
    children: [
      /* 仪表板/首页 */
      {
        path: '/dashboard',
        name: 'Dashboard',
        component: () => import('@/views/Dashboard/index.vue'),
        meta: {
          title: '首页',
          requiresAuth: true
        }
      },
      /* 兼容原来的home路径，重定向到dashboard */
      {
        path: '/home',
        redirect: '/dashboard'
      },
      /* 用户管理页 */
      {
        path: '/system/user',
        name: 'UserManagement',
        component: () => import('@/views/system/user/index.vue'),
        meta: {
          title: '用户管理',
          requiresAuth: true
        }
      },
      /* 角色管理页 */
      {
        path: '/system/role',
        name: 'RoleManagement',
        component: () => import('@/views/system/role/index.vue'),
        meta: {
          title: '角色管理',
          requiresAuth: true
        }
      },
      /* 菜单管理页 */
      {
        path: '/system/menu',
        name: 'MenuManagement',
        component: () => import('@/views/system/menu/index.vue'),
        meta: {
          title: '菜单管理',
          requiresAuth: true
        }
      },
      /* 动态页面 - 处理未知菜单项 */
      {
        path: '/dynamic/:title',
        name: 'DynamicPage',
        component: () => import('@/views/DynamicPage.vue'),
        meta: {
          title: '动态页面',
          requiresAuth: true
        }
      }
    ]
  },

  /* 兜底路由 */
  {
    path: '/:pathMatch(.*)*',
    redirect: '/login'
  }
]

/* ---------------- 创建 Router 实例 ---------------- */
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

/* ------------------------------------------------------------------ */
/*                        🛡️ 路由守卫                                   */
/* ------------------------------------------------------------------ */

/**
 * 检查用户是否已登录
 */
const isLoggedIn = (): boolean => {
  const token = localStorage.getItem('token')
  return !!token && token !== 'null' && token !== 'undefined'
}

/**
 * 全局前置守卫 - 在每次路由跳转前执行
 */
router.beforeEach((to, from, next) => {
  console.log('🚀 路由跳转:', from.path, '→', to.path)

  // 1. 设置页面标题
  document.title = (to.meta?.title as string) || 'Vue3 Element Admin'

  // 2. 检查该页面是否需要登录认证
  const needsAuth = to.meta?.requiresAuth !== false // 默认需要认证
  const userLoggedIn = isLoggedIn()

  console.log('🔍 权限检查:', {
    页面: to.path,
    需要登录: needsAuth,
    已登录: userLoggedIn
  })

  if (needsAuth) {
    // 需要登录的页面
    if (!userLoggedIn) {
      console.log('❌ 未登录，跳转到登录页')
      ElMessage.warning('请先登录')
      next('/login')
      return
    }

    console.log('✅ 已登录，允许访问')
    next()
  } else {
    // 不需要登录的页面（如登录页）
    if (to.path === '/login' && userLoggedIn) {
      console.log('✅ 已登录，直接跳转到仪表板')
      next('/dashboard')
      return
    }

    console.log('✅ 公开页面，允许访问')
    next()
  }
})

/**
 * 全局后置守卫 - 在路由跳转完成后执行
 */
router.afterEach((to, from) => {
  console.log('✅ 路由跳转完成:', from.path, '→', to.path)
})

/**
 * 路由错误处理
 */
router.onError((error) => {
  console.error('❌ 路由错误:', error)
  ElMessage.error('页面加载失败，请刷新重试')
})

export default router
